<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Cache-Control" content="No-Cache">
	<meta http-equiv="Pragma" content="No-Cache">

	<title>운세의신</title>

	<link rel="stylesheet" type="text/css" href="/css/common.css" />
	<link rel="stylesheet" type="text/css" href="/css/join.css"/>
    

	<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
	<link href="/css/lib/myconfig.jquery.validate.css" rel="stylesheet" type="text/css"/>
		
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
	<script src="/js/lib/jquery.validate.min.js" type="text/javascript"></script>
	<script src="/js/lib/jquery.meio.mask.min.js" type="text/javascript"></script>
	<script src="/js/lib/myconfig.jquery.datepicker.js" type="text/javascript"></script>
	<script src="/js/lib/myconfig.jquery.meio.mask.js" type="text/javascript"></script>
	<script src="/js/utility/common_util.js" type="text/javascript"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			$('input:text').setMask();

			// $("#birthdate").datepicker();
			// $("img.ui-datepicker-trigger").attr("style","margin-left:5px; vertical-align:middle; cursor:pointer;"); //이미지버튼 style적용
			// $("#ui-datepicker-div").hide(); //자동으로 생성되는 div객체 숨김 
			
			$('#search_zipcode').click(function() {
				openPopup("/member/zipcode", 470,670);
			});

			$('#email_select').change(function() {
				$("#email_select option:selected").each(function () {
					var email_1 = $('#email').val();
					var email_2 = $(this).val();
					
					if (email_1.length > 0) {
						var atIndex = email_1.indexOf('@');
						if (atIndex >= 0) {
							email_1 = email_1.substring(0, atIndex);
						}
					}
					
					var email = email_1 + '@' + email_2;
					$('#email').val(email);
					$('#email').focus();
				});
			});

			$('#zsfImg').click(function() {
				changeZsfImg()
			});

			// validate signup form on keyup and submit
			$("#frm").validate({
				rules: {
					user_name: "required",
					user_id: {
						required: true,
						minlength: 6,
						remote: {
							url: "/member/join/id_check",
							type: "post"
						}
					},
					nickname: {
						required: true,
						minlength: 2,
						remote: {
							url: "/member/join/nickname_check",
							type: "post"
						}
					},
				    pwd: {
				    	required: true,
				    	minlength: 6
				    },
				    pwd_again: {
						equalTo: "#pwd"
				    },
				    birth_yyyy: {
						required: true
				    },
				    birth_mm: {
						required: true
				    },
				    birth_dd: {
						required: true
				    },
					birth_hh: {
						required: true
					},
					birth_solunar: {
						required: true
					},
				    // zip_code: {
						// required: true
				    // },
				    // addr1: {
						// required: true
				    // },
				    // addr2: {
						// required: true
				    // },
				    email: {
				    	required: true,
				    	email: true,
						remote: {
							url: "/member/join/email_check",
							type: "post"
						} 
				    },
					zsfCode: {
						required: true
					}
				},
				messages: {
					user_name: "이름을 입력해 주세요.",
					user_id: {
						required: "아이디를 입력해 주세요.",
						minlength: "6자리 이상 입력하세요.",
						remote: "이미 등록된 아이디입니다."
					},
					nickname: {
						required: "닉네임을 입력해 주세요.",
						minlength: "2자리 이상 입력하세요.",
						remote: "이미 존재하는 닉네임입니다."
					},
				    pwd: {
						required: "패스워드를 입력하세요.",
						minlength: "6자리 이상 입력하세요."
					},
				    pwd_again: {
						equalTo: "위와 동일한 패스워드를 입력하세요."
				    },
				    birth_yyyy: {
						required: "생년월일을 입력하세요."
					},
					birth_mm: {
						required: "생월을 입력하세요."
					},
					birth_dd: {
						required: "생일을 입력하세요."
					},
					birth_hh: {
						required: "출생시간을 선택하세요."
					},
					birth_solunar: {
						required: "음/양력을 선택하세요."
					},
				    // zip_code: {
						// required: "우편번호를 입력하세요."
				    // },
				    // addr1: {
						// required: "주소를 입력하세요."
				    // },
				    // addr2: {
						// required: "상세주소를 입력하세요."
				    // },
				    email: {
				    	required: "이메일을 입력하세요.",
				    	email : "올바른 이메일을 입력하세요.",
				    	remote : "이미 등록된 이메일입니다."
				    },
				    zsfCode: {
				    	required: "스팸방지코드를 입력하세요."
				    }
				},
				submitHandler: function(form) {
					// $('#telephone').val( $('#tel_1').val()+"-"+$('#tel_2').val()+"-"+$('#tel_3').val() );
					var cellphone =  $('#cell_1').val()+"-"+$('#cell_2').val()+"-"+$('#cell_3').val();
					if (cellphone.length >= 12) {
						$('#cellphone').val(cellphone);
					}
					$('#birthdate').val( $('#birth_yyyy').val()+"-"+$('#birth_mm').val()+"-"+$('#birth_dd').val() );
					zmSpamCheck(form);
				}
			});
		});
		
		function zmSpamCheck(form) {
			var zsfCode = $("#zsfCode").val();
			$.get('/external/zmSpamFree/zmSpamFree.php',
				{'zsfCode':zsfCode},
				function(result) {
					//alert(result);
					if (result == 'true') {
						form.submit();
					} else {
						alert('스팸방지코드 입력값이 틀렸습니다.');
						changeZsfImg();
					}
				}
			);
		}
		
		function changeZsfImg() {
			document.getElementById('zsfImg').src='/external/zmSpamFree/zmSpamFree.php?re&zsfimg=' + new Date().getTime();
		}
	</script>
</head>
<body>
<div id="wrap">
	<!-- Header -->
	<? include_once $_SERVER['DOCUMENT_ROOT'].'/include/commons/main_header.php'; ?>
	<!--// Header -->
    
    <!--커튼 데코레이션-->
	<div class="drapes">
		<p class="drap1"><img src="/images/main/drapes.png" /></p>
        <p class="keybox blind">키비쥬얼</p>
		<p class="drap2"><img src="/images/main/drapes.png" /></p>
	</div>
	<!--//커튼 데코레이션-->

	<!-- Contents -->
	
	<div class="container">
		<h2 class="tjoin blind">회원가입</h2>
		<!--서브타이틀-->
		
		<!--컨텐츠영역-->
		<div class="contents">
			<!--상단위치값--> 
			<div class="sub">
				<!--상단네비위치-->
				<div class="joinnavi">
					<ul class="blind">
						<li class="m1">약관동의</li>
						<li class="m2">실명인증</li>
						<li class="m3 over">회원정보입력</li>
						<li class="m4">무료회원가입완료</li>
					</ul>
				</div>
				<!--//상단네비위치-->
				<form method="post" id="frm" action="<?=SSL_ROOT_URL?>/member/join/register">
					<input type="hidden" name="ipin_di" id="ipin_di" value="<?=$ipin_di?>" size="80" />

					<!--joinConfirm-->
					<div class="joinField">
						<fieldset>
							<legend>기본정보입력영역</legend>
							<h3><img src="/images/member/sstit_user.png" alt="회원정보입력" /></h3>
							<p class="joinFieldText">입력하신 개인정보는 회원님의 동의 없이 제3자에게 제공되지 않으며, 개인정보취급방침에 따라 보호되고 있습니다.</p>

							<table width="100%" summary="" cellpadding="0" cellspacing="0">
								<colgroup>
									<col width="140" />
									<col width="*" />
								</colgroup>
								<tbody>
									<tr>
										<th scope="row">
											<label for="user_name">이름</label>
											<span class="warning">*</span>
										</th>
										<td>
											<input type="text" name="user_name" id="user_name" class="inpText" readonly="readonly" value="<?=$user_name?>" />
											<label class="error" for="user_name" generated="true"></label>
										</td>
									</tr>
									<tr>
										<th scope="row">
											<label for="user_sex">성별</label>
										</th>
										<td>
											<input type="radio" name="sex" id="sex_m" class="input_radio" value="M" <? if ($sex == 'M') { ?>checked="checked"<? } ?> />
											<label for="sex_m">남자</label>
											<input type="radio" name="sex" id="sex_f" class="input_radio" value="F" <? if ($sex == 'F') { ?>checked="checked"<? } ?> />
											<label for="sex_f">여자</label>
										</td>
									</tr>
									<tr>
										<th scope="row">
											<label for="user_birth">사주정보</label>
										</th>
										<td>
											<select name="birth_yyyy" id="birth_yyyy" title="출생년도를 선택하세요" class="input_select">
												<option value="">출생년도</option>
<?	for ($year = 1930; $year <= 2012; $year++) : ?>
												<option value="<?=$year?>" <?=$birth_yyyy == $year ? 'selected="selected"' : '';?>><?=$year?></option>
<?	endfor ?>
											</select>년
											<select name="birth_mm" id="birth_mm" title="출생월을 선택하세요" class="input_select">
												<option value="">출생월</option>
<?	for ($month = 1; $month <= 12; $month++) : ?>
<?		$str_month = str_pad($month, 2, '0', STR_PAD_LEFT); ?>
												<option value="<?=$str_month?>" <?=$birth_mm == $str_month ? 'selected="selected"' : '';?>><?=$month?></option>
<?	endfor ?>
											</select>월
											<select name="birth_dd" id="birth_dd" title="출생일을 선택하세요" class="input_select">
												<option value="">출생일</option>
<?	for ($day = 1; $day <= 31; $day++) : ?>
<?		$str_day = str_pad($day, 2, '0', STR_PAD_LEFT); ?>
												<option value="<?=$str_day?>" <?=$birth_dd == $str_day ? 'selected="selected"' : '';?>><?=$day?></option>
<?	endfor ?>
											</select>일
											<select name="birth_hh" id="birth_hh" title="출생시간을 선택하세요" class="input_select">
												<option value="">출생시간</option>
												<option value="0">모름</option>
												<option value="01">子 (23:30 ~ 01:29)</option>
												<option value="02">丑 (01:30 ~ 03:29)</option>
												<option value="04">寅 (03:30 ~ 05:29)</option>
												<option value="06">卯 (05:30 ~ 07:29)</option>
												<option value="08">辰 (07:30 ~ 09:29)</option>
												<option value="10">巳 (09:30 ~ 11:29)</option>
												<option value="12">午 (11:30 ~ 13:29)</option>
												<option value="14">未 (13:30 ~ 15:29)</option>
												<option value="16">申 (15:30 ~ 17:29)</option>
												<option value="18">酉 (17:30 ~ 19:29)</option>
												<option value="20">戌 (19:30 ~ 21:29)</option>
												<option value="22">亥 (21:30 ~ 23:29)</option>
											</select>시
											<select name="birth_solunar" id="birth_solunar" title="음/양을 선택하세요" class="input_select">
												<option value="">음력/양력</option>
												<option value="S_C">양력</option>
												<option value="L_C">음력(평달)</option>
												<option value="L_L">음력(윤달)</option>
											</select>
											<input type="hidden" name="birthdate" id="birthdate" />
											<br><label class="error" for="birth_yyyy" generated="true"></label>
											<label class="error" for="birth_mm" generated="true"></label>
											<label class="error" for="birth_dd" generated="true"></label>
											<label class="error" for="birth_hh" generated="true"></label>
											<label class="error" for="birth_solunar" generated="true"></label>
										</td>
									</tr>
									<tr>
										<th scope="row">
											<label for="user_id">회원아이디</label>
											<span class="warning">*</span>
										</th>
										<td>
											<input type="text" name="user_id" id="user_id" alt="user_id" maxlength="12" title="아이디를 입력하세요." class="inpText"  />
											<!--a href="#"><img src="/images/member/bt_join_check.png" alt="중복확인" align="absmiddle" /></a-->
											<span>아이디는 영문과 숫자 혼용 6 ~ 12자 이내로 작성해 주세요.</span>
											<br/><label class="error" for="user_id" generated="true"></label>
										</td>
									</tr>
									<tr>
										<th scope="row">
											<label for="nickname">닉네임</label>
											<span class="warning">*</span>
										</th>
										<td>
											<input type="text" name="nickname" id="nickname" maxlength="20" title="닉네임 입력하세요." class="inpText"  />
											<!--a href="#"><img src="/images/member/bt_join_check.png" alt="중복확인" align="absmiddle" /></a-->
											<span>닉네임은 2 ~ 12자 이내로 작성해 주세요.</span>
											<br/><label class="error" for="nickname" generated="true"></label>
										</td>
									</tr>
									<tr>
										<th scope="row">
											<label for="pwd">비밀번호</label>
											<span class="warning">*</span>
										</th>
										<td>
											<input type="password" name="pwd" id="pwd" maxlength="20" class="inpText"  />
											<span>비밀번호는 영문과 숫자 혼용 6 ~ 20자 이내로 작성해 주세요.</span>
											<br/><label class="error" for="pwd" generated="true"></label>
										</td>
									</tr>
									<tr>
										<th scope="row">
											<label for="pwd_again">비밀번호 확인</label>
											<span class="warning">*</span>
										</th>
										<td>
											<input type="password" name="pwd_again" id="pwd_again" maxlength="20" class="inpText" />
											<br/><label class="error" for="pwd_again" generated="true"></label>
										</td>
									</tr>
									<tr>
										<th scope="row">
											<label for="email_1">이메일 주소</label>
											<span class="warning">*</span>
										</th>
										<td>
											<input type="text" name="email" id="email" title="이메일을 작성하세요." class="inpText" />
											<select id="email_select" name="email_select" title="이메일 도메인을 선택하세요." class="input_select" >
>
												<option value="">직접입력</option>
												<option value="naver.com">naver.com</option>
												<option value="nate.com">nate.com</option>
												<option value="hanmail.net">hanmail.net</option>
												<option value="gmail.com">gmail.com</option>
												<option value="paran.com">paran.com</option>
												<option value="yahoo.co.kr">yahoo.co.kr</option>
												<option value="dreamwiz.com">dreamwiz.com</option>
												<option value="empal.com">empal.com</option>
												<option value="hotmail.com">hotmail.com</option>
												<option value="korea.com">korea.com</option>
												<option value="lycos.co.kr">lycos.co.kr</option>
											</select>
											<!--a href="#"><img src="/images/member/bt_join_check.png" alt="중복확인" align="absmiddle" /></a-->
											<input type="checkbox" checked="checked" class="input_check" id="mailing_yn" name="mailing_yn" value="Y" />
											<label for="mailing_yn">메일수신동의</label>
											<br/><label class="error" for="email" generated="true"></label>
										</td>
									</tr>
                                    <!---넣을것-->
                           			 <tr>
										<th scope="row">
											<label for="num_adress">우편번호</label>
										</th>
										<td>
											<input type="text" name="zip_code" id="zip_code" size="7" readonly="readonly" title="우편번호를 검색하세요" class="inpText" />
											 <a href="javascript:;" name="search_zipcode" id="search_zipcode"><img src="/images/member/bt_join_adress.png" align="top" alt="우편번호검색" /></a>
										</td>
									</tr>
                            		<tr>
										<th scope="row">
											<label for="addr2">주소</label>
										</th>
										<td>
											<input type="text" name="addr1" id="addr1" size="60" readonly="readonly" value="" title="주소를 입력하세요." class="inpText" />
                                            <span></span>
											<input type="text" name="addr2" id="addr2" size="30" maxlength="100" value="" title="상세주소를 입력하세요." class="inpText" />
										</td>
									</tr>
							
                            <!---넣을것-->
									<tr>
										<th scope="row" class="end">
											<label for="cell_1">휴대번호</label>
										</th>
										<td class="end">
											<!--select name="user_mobile" id="user_mobile" title="통신사를 선택하세요">
												<option value="">통신사</option>
												<option value="SK">SK</option>
												<option value="KT">KT</option>
												<option value="LG">LG</option>
											</select-->
											<select name="cell_1" id="cell_1" title="서비스 번호를 선택하세요" class="input_select">
												<option value="010">010</option>
												<option value="011">011</option>
												<option value="016">016</option>
												<option value="017">017</option>
												<option value="018">018</option>
												<option value="019">019</option>
											</select>
											 - 
											<input type="text" name="cell_2" id="cell_2" size="12" value="" title="전화번호 가운데자리를 입력하세요." alt="phone"  class="inpText"/>
											 - 
											<input type="text" name="cell_3" id="cell_3" size="12" value="" title="전화번호 뒷자리를 입력하세요." alt="phone" class="inpText" />
											<input type="checkbox" class="input_check" id="sms_yn" name="sms_yn" value="Y" checked="checked" />
											<label for="sms_yn">SMS 수신 동의</label>
											<input type="hidden" name="cellphone" id="cellphone" />
										</td>
									</tr>
                                
								</tbody>
							</table>
						</fieldset>
							
						<fieldset>
							<legend>추가정보입력영역</legend>
							<h3><img src="/images/member/sstit_useradd.png" alt="추가정보입력" /></h3>
							<p class="joinFieldText">프로그램을 이용한 자동 가입방지를 위해서 보안절차를 거치고 있습니다.</p>

							<table width="100%" summary=""  cellpadding="0" cellspacing="0">
								<colgroup>
									<col width="300" />
								</colgroup>
								<tbody>
									<tr>
										<th scope="row" class="end">
											<label for="user_usim">
												<img src="/external/zmSpamFree/zmSpamFree.php?zsfimg=<?=time()?>" id="zsfImg" style="cursor: pointer" />
											</label>
										</th>
										<td >
											<input type="text" name="zsfCode" id="zsfCode" title="글자를 입력하세요"  class="inpText" />
											<span class="underline"><a href="javascript:changeZsfImg()">이미지 새로고침</a></span> 
										</td>
									</tr>
								</tbody>
							</table>
						</fieldset>
					</div>
					<!--//joinConfirm-->
						
					<div class="bt_area">
						<input type="image" src="/images/member/bt_yes.png" alt="동의합니다" style="cursor: pointer"  class="yes" />
						<a href="javascript:;" onclick="location.href='/';" class="btno"><img src="/images/member/bt_no.png" alt="동의하지않습니다" /></a>
					</div>
				</form>
			</div>
			<!--상단위치값--> 
		</div>
		<!--//컨텐츠영역-->
		
		<!--이벤컨텐츠영역--> 
		<div class="line"></div>
		<div class="joinbenefit">
			<h3 class="blind">운세의 신 무료가입 파격 혜택</h3>
			<p><img src="/images/member/img_freejoin.png" alt="운세의 신 무료가입 파격 혜택내용" /></p>
		</div>
		<!--//이벤컨텐츠영역--> 
		
	</div>

	
	<!--div>
		<form method="post" action="<?=SSL_ROOT_URL?>/member/join/register">
			<fieldset>
				<p>
					<label for="interest">관심분야</label>
					<input type="checkbox" id="interest1" name="interest[]" value="사주" /><label for="interest1">사주</label>
					<input type="checkbox" id="interest2" name="interest[]" value="궁합" /><label for="interest2">궁합/애정운</label>
					<input type="checkbox" id="interest3" name="interest[]" value="19금" /><label for="interest3">19금</label>
					<input type="checkbox" id="interest4" name="interest[]" value="토정비결" /><label for="interest4">토정비결</label>
					<input type="checkbox" id="interest5" name="interest[]" value="무료운세" /><label for="interest5">무료운세</label>
				</p>
				<p><img src="/external/zmSpamFree/zmSpamFree.php?zsfimg=<?=time()?>" id="zsfImg" style="cursor: pointer" /></p>
				<p><input type="text" size="8" maxlen	gth="10" name="zsfCode" id="zsfCode" /></p>
				<input type="submit" value="등록" />
			</fieldset>
		</form>
	</div-->
	<!--// Contents -->
	
	<!-- Footer -->
	<? include_once $_SERVER['DOCUMENT_ROOT'].'/include/commons/main_footer.php'; ?>
	<!--// Footer -->
</div>
</body>
</html>